<template>
    <!-- 支付弹窗 -->
    <el-dialog v-model="dialogRole" width="700px">
      <template #header>
        <div class="header-title">支付</div>
      </template>
         <div>
          <b>总计</b>
          <el-table :data="payTotal">
            <el-table-column prop="needPayContainerNum" label="应付箱量">
              <template v-slot="scope">
                {{ scope.row.needPayContainerNum }}
              </template>
            </el-table-column>
            <el-table-column prop="dealAmount" :label="'应付租箱费总计(' + payCurrency + ')'"> </el-table-column>
            <el-table-column prop="deductAmount" :label="'实付租箱费总计(' + payCurrency + ')'"> </el-table-column>
          </el-table>
          <b>明细</b>
          <el-table :data="payDetail">
            <el-table-column prop="orderNo" label="订单号" width="220"> </el-table-column>
            <!-- <el-table-column prop="carryCity" :label="param.invoiceInfo.invoiceSource == 15 ? '购箱城市' : '租箱城市'"
              width="120">
            </el-table-column> -->
            <el-table-column prop="createTime" label="下单日期">
              <template v-slot="scope">
                {{ formatDate(scope.row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="packedQuantity" label="箱量" width="120"> </el-table-column>
            <el-table-column prop="amount" :label="'订单金额(' + payCurrency + ')'" width="120"> </el-table-column>
            <el-table-column prop="actualPayAmount" :label="'应付租箱费(' + payCurrency + ')'" width="120"> </el-table-column>
          </el-table>
          <el-form ref="payFormRef" :model="form" label-width="200" :rules="rules"
            style="margin: 50px 0 50px 100px;">
            <!-- <el-form-item label="优惠券">{{ 0 || '无' }}</el-form-item> -->
            <el-form-item label="支付方式" prop="paymentMethod">
              <el-select v-model="form.paymentMethod" style="width:220px" placeholder="选择">
                <el-option label="对公转账" value="5" />
                <el-option label="在线支付" value="10" />
              </el-select>
            </el-form-item>
            <el-form-item label="电子回执单" prop="payUrl">
              <imgUpload ref="payRef" :drag="false" style="width:100%"></imgUpload>
            </el-form-item>
            <el-form-item label="支付日期" prop="paymentDate">
              <el-date-picker v-model="form.paymentDate" type="date" placeholder="选择日期" />
            </el-form-item>
          </el-form>
        </div>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm"> 确定</el-button>
               <!-- <el-button @click="onBeforeCancel">取 消</el-button> -->
            </div>
         </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted ,toRefs} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import imgUpload from '@/components/upload/index.vue'
import { formatDate} from '@/utils'
import { getInvoicePage, getInvoicesInfo ,exportInvoice } from '@/api/invoice/index'
import { rentUploadingInvoice, callbackUploadingInvoice, payBoxLabelInvoice } from '@/api/invoice'
import type { FormInstance, FormRules } from 'element-plus'
const dialogRole=ref(false) //弹框
// const form=ref({})
const payFormRef=ref()
const payDetail=ref()
const payTotal=ref()
// const payFormRules = {
//   paymentMethod: [
//     { required: true, message: '支付方式不能为空', trigger: 'change' },
//   ],
//   payUrl: [
//     { required: true, message: '发票抬头不能为空', trigger: 'change' },
//   ],
//   paymentDate: [
//     { required: true, message: '支付日期不能为空', trigger: 'blur' },
//     { validator: validatePlanPackingDate, trigger: 'blur' }
//   ],
// }
const data = reactive({
  form: {},
  rules: {
    paymentMethod: [
    { required: true, message: '支付方式不能为空', trigger: 'change' },
  ],
  payUrl: [
    { required: true, message: '发票抬头不能为空', trigger: 'change' },
  ],
  paymentDate: [
    { required: true, message: '支付日期不能为空', trigger: 'blur' },
    // { validator: validatePlanPackingDate, trigger: 'blur' }
  ],
  }
});
const { form, rules } = toRefs(data);
//校验规则
const validatePlanPackingDate = (rule: any, value: any, callback: any) => {
  if (value > new Date(new Date().setHours(0, 0, 0, 0))) {
    return callback(new Error('支付日期 必须小于等于今天'))
  }
  return callback()
}
const onShow = async (id) => {
  dialogRole.value = true
  // typeRef.value=type
  // columnsOne.value.map((item)=>{
  //   if(item.key=='flex'){
  //     item.visible=type==1 ? true :false
  //   }
  // })
  getDetailAndTotal(id) 
}
// 获取详情
const payCurrency = ref('')
function getDetailAndTotal(id) {
  getInvoicesInfo(id).then((res: any) => {
    let invoicesInfo = res.data
    payCurrency.value = invoicesInfo.payCurrency == 'CNY' ? '￥' : '$'
    let containerNoDetail = JSON.parse(invoicesInfo.containerNoDetail)
    containerNoDetail.map((item: any) => {
      item.planPickupDate = formatDate(item.planPickupDate, 2)
    })
    payDetail.value = containerNoDetail
    payTotal.value = [{ needPayContainerNum: invoicesInfo.payContainerNum, dealAmount: invoicesInfo.dealAmount, deductAmount: invoicesInfo.deductAmount }]
    // console.log(param.oprType)
    // param.invoiceInfo = res.data
    // switch (param.oprType) {
    //   case 'rentFee':
    //     param.rentFeeDetail = containerNoDetail || []
    //     param.rentFeeTotal = [{ needPayContainerNum: param.rentFeeDetail.length, deductAmount: invoicesInfo.deductAmount, dealAmount: invoicesInfo.dealAmount }]
    //     break
    //   case 'xiangTieFee':
    //     param.xiangTieFeeDetail = containerNoDetail || []
    //     param.xiangTieFeeTotal = [{ needPayContainerNum: param.xiangTieFeeDetail.length, deductOverdueAmount: invoicesInfo.deductOverdueAmount, dealAmount: invoicesInfo.dealAmount, annulOverdueAmount: invoicesInfo.annulOverdueAmount, paymentOverdueAmount: invoicesInfo.paymentOverdueAmount, deductAmount: invoicesInfo.deductAmount, deductElseAmount: invoicesInfo.deductElseAmount }]
    //     break
    //   case 'sellBoxFee':
    //     param.sellBoxFeeDetail = containerNoDetail || []
    //     param.sellBoxFeeTotal = [{ needPayContainerNum: param.sellBoxFeeDetail.length, deductAmount: invoicesInfo.deductAmount, dealAmount: invoicesInfo.dealAmount, annulOverdueAmount: invoicesInfo.annulOverdueAmount, paymentOverdueAmount: invoicesInfo.paymentOverdueAmount, couponAmount: invoicesInfo.couponAmount }]
    //     break
    //   case 'img':
    //     // param.sellBoxFeeDetail = containerNoDetail
    //     // param.sellBoxFeeTotal = [{ needPayContainerNum: param.sellBoxFeeDetail.length, deductOverdueAmount: val.deductOverdueAmount, dealAmount: val.dealAmount, annulOverdueAmount: val.annulOverdueAmount, paymentOverdueAmount: val.paymentOverdueAmount, deductAmount: val.deductAmount }]
    //     break
    //   case 'pay':
    //     param.payDetail = containerNoDetail
    //     param.payTotal = [{ needPayContainerNum: invoicesInfo.payContainerNum, dealAmount: invoicesInfo.dealAmount, deductAmount: invoicesInfo.deductAmount }]
    //     break
    //   case 'invoice':
    //     param.xiangTieFeeDetail = containerNoDetail || []
    //     param.xiangTieFeeTotal = [{ needPayContainerNum: param.xiangTieFeeDetail.length, deductOverdueAmount: invoicesInfo.deductOverdueAmount, dealAmount: invoicesInfo.dealAmount, annulOverdueAmount: invoicesInfo.annulOverdueAmount, paymentOverdueAmount: invoicesInfo.paymentOverdueAmount, deductAmount: invoicesInfo.deductAmount }]

    //     param.sellBoxFeeDetail = containerNoDetail
    //     param.sellBoxFeeTotal = [{ needPayContainerNum: param.sellBoxFeeDetail.length, deductOverdueAmount: val.deductOverdueAmount, dealAmount: val.dealAmount, annulOverdueAmount: val.annulOverdueAmount, paymentOverdueAmount: val.paymentOverdueAmount, deductAmount: val.deductAmount }]
    //     break
    //   default:
    //     param.oprType = ''
    //     break
    // }
    // param.dialogVisible = true
  })
}
const emits = defineEmits(['updateMode'])
/** 提交按钮 */
const submitForm = (formEl: FormInstance | undefined) =>{
  if (!formEl) return
  formEl.validate(valid => {
   let dataForm=JSON.parse(JSON.stringify(form.value))
    if (valid) {
      // dataForm.ids=ids.value
       payBoxLabelInvoice(dataForm).then(response => {
        //  emits('feetMode');
            ElMessage({ message: '支付成功', type: 'success' })

          cancel();
        });
    }
  });
};

//关闭弹框
const cancel = () => {
  dialogRole.value=false
}


defineExpose({ onShow })
</script>

<style scoped>
.dialog-footer{
  display: flex;
  justify-content: center;
}
</style>